<template>
    <div>
        <header>
            <yk-space justify="between" align="center">
                <div class=" back" href="">
                    <IconBackFill :size="20" />
                </div>
                <yk-text type="secondary" :strong="true">俄罗斯方块</yk-text>
                <yk-avatar icon="yike-xin">
                    <icon-heart-outline />
                </yk-avatar>
            </yk-space>
        </header>
        <main>
            <yk-space justify="between" align="center">
                <div class="side-bar">排行榜</div>
                <Tetris />
                <div class="side-bar">交流</div>
            </yk-space>
        </main>
        <!-- <footer></footer> -->
    </div>
</template>
  
<script setup>
import Tetris from './views/Tetris.vue'

</script>

<style lang="less">
@import "@yike-design/ui/es/components/styles/basis.less";
#app {
    height: 100%;
    header {
        width: 95%;
        margin: 0 auto;
        height: 50px;
        line-height: 50px;
        div {
            cursor: pointer;
        }

        .back {
            width: 4%;
        }
    }
    main {
        // height: calc(100vh - 50px);
        background: @bg-color-m;
    }

    .side-bar {
        width: 30%;
        height: calc(100vh - 50px);
    }
}
</style>
  